<template>
	<div class="search">
		<Row>
			<Col>
			<Card>
				<Row @keydown.enter.native="handleSearch">
					<Form ref="searchForm" :model="searchForm" inline :label-width="110" class="search-form">
						<Form-item label="活动名称" prop="activityName">
							<Input type="text" v-model.trim="searchForm.activityName" placeholder="请输入活动名称" clearable style="width: 200px" />
						</Form-item>

						<Form-item style="margin-left:-35px;" class="br">
							<Button @click="handleSearch" type="primary" icon="ios-search">搜索</Button>
							<Button @click="handleReset">重置</Button>

						</Form-item>
					</Form>
				</Row>
				<Row class="operation">
					<Button @click="add" type="primary" icon="md-add">添加</Button>
					<Button @click="delAll" icon="md-trash">批量删除</Button>
					<Button @click="getDataList" icon="md-refresh">刷新</Button>
					<circleLoading v-if="operationLoading" />
				</Row>
				<Row>
					<Alert show-icon>
						已选择 <span class="select-count">{{selectCount}}</span> 项
						<a class="select-clear" @click="clearSelectAll">清空</a>
					</Alert>
				</Row>
				<Row>
					<Table :loading="loading" border :columns="columns" :data="data" ref="table" sortable="custom" @on-sort-change="changeSort"
					 @on-selection-change="changeSelect"></Table>
				</Row>
				<Row type="flex" justify="end" class="page">
					<Page :current="pageNumber" :total="total" :page-size="pageSize" @on-change="changePage" @on-page-size-change="changePageSize"
					 :page-size-opts="[10,20,50]" size="small" show-total show-elevator show-sizer></Page>
				</Row>
			</Card>
			</Col>

		</Row>
		<Modal :title="modalTitle" v-model="modalVisible" :mask-closable='false' :width="1000">
			<Form ref="form" :model="form" :label-width="120" :rules="formValidate" inline>
				<FormItem label="活动名称" prop="activityName">
					<Input v-model.trim="form.activityName" :maxlength=100 placeholder="请输入活动名称" style="width:350px" />
				</FormItem>
				<FormItem label="活动名称(英文)" prop="activityNameEn">
					<Input v-model.trim="form.activityNameEn" :maxlength=100 placeholder="请输入活动名称(英文)" style="width:350px" />
				</FormItem>
				<Row>
					<FormItem label="活动时间" prop="times">
						<DatePicker v-model="form.times" @on-change="selectTimes" type="datetimerange" :time-picker-options="{steps: [1, 10, 10]}"
						 format="yyyy-MM-dd HH:mm" placeholder="请选择活动时间" style="width: 350px"></DatePicker>
					</FormItem>
					<FormItem label="显示时间(时/分)" prop="showTime">
						<i-switch size="large" v-model="form.showTime" style="width:70px;">
							<span slot="open">显示</span>
							<span slot="close">不显示</span>
						</i-switch>
					</FormItem>
				</Row>
				<FormItem label="活动地点" prop="address">
					<Input v-model.trim="form.address" :maxlength=100 placeholder="请输入活动地点" style="width:350px" />
				</FormItem>
				<FormItem label="活动地点(英文)" prop="addressEn">
					<Input v-model.trim="form.addressEn" :maxlength=100 placeholder="请输入活动地点(英文)" style="width:350px" />
				</FormItem>
				<FormItem label="主办单位" prop="organizer">
					<Input v-model.trim="form.organizer" :maxlength=200 placeholder="请输入主办单位" style="width:350px" />
				</FormItem>
				<FormItem label="主办单位(英文)" prop="organizerEn">
					<Input v-model.trim="form.organizerEn" :maxlength=200 placeholder="请输入主办单位(英文)" style="width:350px" />
				</FormItem>
				<FormItem label="承办单位" prop="undertake">
					<Input v-model.trim="form.undertake" :maxlength=200 placeholder="请输入承办单位" style="width:350px" />
				</FormItem>
				<FormItem label="承办单位(英文)" prop="undertakeEn">
					<Input v-model.trim="form.undertakeEn" :maxlength=200 placeholder="请输入承办单位(英文)" style="width:350px" />
				</FormItem>

				<FormItem label="活动简介" prop="introduction">
					<Input v-model.trim="form.introduction" :maxlength=500 placeholder="请输入活动简介" style="width:350px" type="textarea"
					 rows="4" />
				</FormItem>
				<FormItem label="活动简介(英文)" prop="introductionEn">
					<Input v-model.trim="form.introductionEn" :maxlength=500 placeholder="请输入活动简介(英文)" style="width:350px" type="textarea"
					 rows="4" />
				</FormItem>

			</Form>
			<div slot="footer">
				<Button type="text" @click="modalVisible=false">取消</Button>
				<Button type="primary" :loading="submitLoading" @click="handleSubmit">提交</Button>
			</div>
		</Modal>
	</div>
</template>

<script>
	import circleLoading from "@/views/my-components/circle-loading.vue";

	import {
		addActivity,
		editActivity,
		getActivityList,
		deleteActivity,
	} from "@/api/index";
	export default {
		name: "activity-manage",
		components: {
			circleLoading,
		},
		data() {
			return {
				loading: true, // 表单加载状态
				operationLoading: false, // 操作加载状态
				modalType: 0, // 添加或编辑标识
				modalVisible: false, // 添加或编辑显示
				modalTitle: "", // 添加或编辑标题
				searchForm: { // 搜索框初始化对象
					pageNumber: 1, // 当前页数
					pageSize: 10, // 页面大小
					sort: 'createTime',
					order: "desc",
					activityName: '',
				},


				form: { // 添加或编辑表单对象初始化数据
					activityName: "",
					activityNameEn: "",
					address: '',
					addressEn: '',
					organizer: "",
					organizerEn: "",
					undertake: "",
					undertakeEn: "",
					introduction: "",
					introductionEn: "",
					timeStart: null,
					timeEnd: null,
					times: [],
					showTime: false,
				},
				// 表单验证规则
				formValidate: {
					activityName: [{
						required: true,
						trigger: "blur",
						message: "请输入活动名称"
					}],
					activityNameEn: [{
						required: true,
						trigger: "blur",
						message: "请输入活动名称(英文)"
					}],
					address: [{
						required: true,
						trigger: "blur",
						message: "请输入活动地点"
					}],
					addressEn: [{
						required: true,
						trigger: "blur",
						message: "请输入活动地点(英文)"
					}],
					times: [{
						type: 'array',
						required: true,
						fields: {
							0: {
								type: 'date',
								required: true,
								message: '请选择活动时间'
							},
							1: {
								type: 'date',
								required: true,
								message: '请选择活动时间'
							}
						},
					}],
					status: [{
						type: 'boolean',
						required: true,
						trigger: "change",
						message: "请选择是否显示时间"
					}],

				},
				submitLoading: false, // 添加或编辑提交状态
				selectList: [], // 多选数据
				selectCount: 0, // 多选计数
				columns: [
					// 表头
					{
						type: "selection",
						width: 60,
						align: "center"
					},
					{
						type: "index",
						width: 60,
						align: "center"
					},
					{
						title: "活动名称",
						key: "activityName",
						minWidth: 120,
					},
					{
						title: "活动名称（英文）",
						key: "activityNameEn",
						minWidth: 140,
					},
					{
						title: "收藏数",
						key: "collectCount",
						minWidth: 80,
					},
					{
						title: "活动开始时间",
						key: "timeStart",
						minWidth: 140,
					},
					{
						title: "活动结束时间",
						key: "timeEnd",
						minWidth: 140,
					},
					{
						title: "显示时间（时/分）",
						key: "showTime",
						minWidth: 120,
						render: (h, params) => {
							return h("div", params.row.showTime == true ? '显示' : '不显示');

						}
					},
					{
						title: "活动地点",
						key: "address",
						minWidth: 140,
					},
					{
						title: "活动地点（英文）",
						key: "addressEn",
						minWidth: 140,
					},
					{
						title: "创建时间",
						key: "createTime",
						minWidth: 160,
						sortable: true,
					},
					{
						title: "更新时间",
						key: "updateTime",
						minWidth: 160,
						sortable: true,
					},
					{
						title: "操作",
						key: "action",
						align: "center",
						width: 120,
						fixed: "right",
						render: (h, params) => {
							return h("div", [
								h(
									'I', {
										class: 'ivu-icon ivu-icon-ios-create-outline',
										style: {
											marginRight: "5px",
											color: "#2d8cf0",
											'font-size': "28px",
											'font-weight': "bold",
											cursor: "pointer"
										},
										attrs: {
											title: "编辑",

										},

										on: {
											click: () => {
												this.edit(params.row);
											}
										}
									},

								),

								h(
									'i', {
										class: 'ivu-icon ivu-icon-ios-trash',
										style: {
											marginRight: "5px",
											color: "#ff5959",
											'font-size': "28px",
											cursor: "pointer"
										},
										attrs: {
											title: "删除",
										},

										on: {
											click: () => {
												this.remove(params.row);
											}
										}
									},

								)
							]);
						}
					}
				],
				data: [], // 表单数据
				pageNumber: 1, // 当前页数
				pageSize: 10, // 页面大小
				total: 0, // 表单数据总数

			};
		},
		methods: {
			selectTimes(v) {
				if (v) {
					this.form.timeStart = v[0];
					this.form.timeEnd = v[1];
				}
			},
			init() {
				this.getDataList();

			},
			changePage(v) {
				this.searchForm.pageNumber = v;
				this.getDataList();
				this.clearSelectAll();
			},
			changePageSize(v) {
				this.searchForm.pageSize = v;
				this.getDataList();
			},
			handleSearch() {
				this.searchForm.pageNumber = 1;
				this.searchForm.pageSize = 10;
				this.getDataList();
			},
			handleReset() {
				this.$refs.searchForm.resetFields();
				this.searchForm.pageNumber = 1;
				this.searchForm.pageSize = 10;
				// 重新加载数据
				this.getDataList();
			},
			changeSort(e) {
				this.searchForm.sort = e.key;
				this.searchForm.order = e.order;
				if (e.order === "normal") {
					this.searchForm.order = "";
				}
				this.getDataList();
			},
			clearSelectAll() {
				this.$refs.table.selectAll(false);
			},
			changeSelect(e) {
				this.selectList = e;
				this.selectCount = e.length;
			},
			getDataList() {
				this.loading = true;
				getActivityList(this.searchForm).then(res => {
					this.loading = false;
					if (res.success === true) {
						this.data = res.result.content;
						this.total = res.result.totalElements;
					}
				});


			},


			handleSubmit() {

				this.$refs.form.validate(valid => {

					if (valid) {

						this.submitLoading = true;

						if (this.modalType === 0) {
							// 添加 避免编辑后传入id等数据 记得删除
							delete this.form.id;

							addActivity(this.form).then(res => {
								this.submitLoading = false;
								if (res.success == true) {
									this.$Message.success("操作成功");
									this.getDataList();
									this.modalVisible = false;

								}
							});

						} else {
							// 编辑
							editActivity(this.form).then(res => {
								this.submitLoading = false;
								if (res.success == true) {
									this.$Message.success("操作成功");
									this.getDataList();
									this.modalVisible = false;
								}
							});

						}
					}
				});
			},
			add() {

				this.modalType = 0;
				this.modalTitle = "添加";
				this.$refs.form.resetFields();
				delete this.form.id;
				this.modalVisible = true;
			},
			edit(v) {
				this.modalType = 1;
				this.modalTitle = "编辑";
				// 转换null为""
				for (let attr in v) {
					if (v[attr] === null) {
						v[attr] = "";
					}
				}
				let str = JSON.stringify(v);
				let data = JSON.parse(str);
				this.form = data;
				this.form.times = [this.moment(this.form.timeStart).toDate(), this.moment(this.form.timeEnd).toDate()];
				this.modalVisible = true;
			},
			remove(v) {
				this.$Modal.confirm({
					title: "确认删除",
					// 记得确认修改此处
					content: "您确认要删除 " + v.activityName + " ?",
					onOk: () => {
						// 删除
						this.operationLoading = true;
						deleteActivity(v.id).then(res => {
							this.operationLoading = false;
							if (res.success == true) {
								this.$Message.success("删除成功");
								this.getDataList();
							}
						});


					}
				});
			},
			delAll() {
				if (this.selectCount <= 0) {
					this.$Message.warning("您还未选择要删除的数据");
					return;
				}
				this.$Modal.confirm({
					title: "确认删除",
					content: "您确认要删除所选的 " + this.selectCount + " 条数据?",
					onOk: () => {
						let ids = "";
						this.selectList.forEach(function(e) {
							ids += e.id + ",";
						});
						ids = ids.substring(0, ids.length - 1);
						this.operationLoading = true;
						deleteActivity(ids).then(res => {
							this.operationLoading = false;
							if (res.success == true) {
								this.$Message.success("删除成功");
								this.clearSelectAll();
								this.getDataList();
							}
						});
					}
				});
			},



		},
		computed: {},
		mounted() {
			this.init();
		}
	};
</script>
<style lang="less">
	.search {
		.operation {
			margin-bottom: 2vh;
		}

		.select-count {
			font-size: 13px;
			font-weight: 600;
			color: #40a9ff;
		}

		.select-clear {
			margin-left: 10px;
		}

		.page {
			margin-top: 2vh;
		}

		.drop-down {
			font-size: 13px;
			margin-left: 5px;
		}
	}

	.ivu-switch-large.ivu-switch-checked:after {
		left: 50px;
	}
</style>
